<!DOCTYPE html>
<html>

<head>
    <!-- 当前文档的字符集编码为utf-8 -->
    <meta charset="utf-8">
    <meta name="author" content="disenQF">
    <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
    <title>HTML5模板-弹性盒子</title>
    <!-- 引入外联样式文件 -->
    <!-- <link rel="stylesheet" href="/css/my.css"> -->
    <style>
        /* 设置html和body高度为100%，确保页面铺满屏幕 */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* 确保没有滚动条 */
            box-sizing: border-box;
        }

        body {
            background-color: rgb(250, 188, 173, 0.2);
            /* background-image: url('/project/img/bg.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center; */
        }


        /* 弹性盒子: 在盒子模型基础上，增强子元素的对齐方式 */
        .img-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .logo {
            height: 45px;
        }

        /* 设置container高度占满页面 */
        #container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        #toper {
            background-color: rgba(250, 188, 173, 0.5);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            border-bottom: 2px solid black;
            flex-shrink: 0;
            padding: 0 20px;
            /* 添加左右 padding */
        }


        .row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .row-vcenter {
            align-items: center;
        }

        #userInfo {
            margin: 0 10px;
        }

        /* 让#main占据剩余的空间，并禁用滚动 */
        #main {
            flex-grow: 1;
            display: flex;
            overflow: hidden;
            /* 禁止内容溢出导致滚动 */
        }

        #main h3 {
            text-align: center;
        }

        #footer {
            background-color: rgba(250, 188, 173, 0.5);
            height: 46px;
            border-top: 1px solid lightgray;
            text-align: center;
            flex-shrink: 0;
        }

        #menu {
            background-color: rgba(24, 249, 229, 0.3);
            width: 240px;
            border-right: 1px solid lightgray;
            overflow-y: auto;
            /* 如果菜单太长，菜单可以独立滚动 */
            flex-shrink: 0;
            box-sizing: border-box;
            /* 确保padding不会导致滚动条 */
        }

        #myframe {
            height: 100%;
            width: 100%;
            border: none;
        }

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* 确保padding和border不会增加宽度 */
        }

        li {
            text-align: center;
            padding: 10px;
            margin: 10px 0;
            width: 100%;
        }

        li>a {
            display: block;
            /* 使a标签成为块级元素，充满li */
            width: 100%;
            height: 100%;
            color: blue;
            text-decoration: none;
            box-sizing: border-box;
            /* 确保padding不会影响宽度 */
        }

        li:hover {
            background-color: lightblue;
        }

        #useractions {
            display: none;
            position: absolute;
            top: 80px;
            right: 20px;
            background-color: #fff;
            border: 1px solid lightblue;
            padding: 10px 5px;
            opacity: 0.8;
            z-index: 10;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="toper">
            <!-- <img class="logo" src="/img/top_left.png"> -->
            <img class="logo" src="https://pic4.zhimg.com/v2-03a2f3ba17a0b116da6fd3e6cd87e117_r.jpg" width="200">
            <div class="row row-vcenter">
                <div id="useractions">
                    <a onclick="localStorage.clear();location.href='/project/login.html';">退出登录</a>
                </div>
                <b id="userInfo">(●ˇ∀ˇ●)</b>
                <img id="userHead" src="https://img0.baidu.com/it/u=16503336,1413432408&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" class="img-circle"
                    onclick="useractions.style='display:block;';"
                    onmouseleave="setTimeout(()=>{useractions.style='display:none;';}, 1000);">
            </div>
        </div>

        <div id="main" class="row">
            <div id="menu">
                <h3>我的功能模块</h3>
                <!-- ul 无序列表, ol有序列表，列表项都是li -->
                <ul>
                    <li>
                        <a target="content_frame" href="./rules.html">环境检测</a>
                    </li>
                    <li>
                        <a target="content_frame" href="./gl_word.html">环境管理</a>
                    </li>
                    <li>
                        <a target="content_frame" href="./words.html">🤭🤭🤭</a>
                    </li>
                    <li>
                        <a target="content_frame" href="./arp.html">环境控制</a>
                    </li>
                    <li>
                        <a target="content_frame" href="./route.html">授权管理</a>
                    </li>

                </ul>
            </div>
            <!-- iframe 网页中的内嵌窗口 -->
            <iframe id="myframe" name="content_frame" frameborder="0"></iframe>
        </div>

        <div id="footer">
            <b>版本所有@三玖欸-IoT2402</b><br>
            <i>2024-10-10</i>
        </div>
    </div>

    <script>
/*         window.onload = function () {
            if (localStorage.getItem("uid") == null) {
                // 未登录 
                location.href = "/login.html";
            } else {
                userInfo.innerText = localStorage.nickname;
                userHead.setAttribute("src", localStorage.head);
            }
        } */
    </script>
</body>

</html>